<template>
<!-- template主要用于属性 -->
    <div class="home">
        <h1>美食美客</h1>
        <!-- 设置轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in banners" :key="index">
                <van-image class="images" fit="cover" :src="item.img" />
            </van-swipe-item>
        </van-swipe>

        <ul>
            <li v-for="item in home" :key="item.id">
                <div class="head">
                    <!-- 动态绑定数据 -->
                    <div class="head-left">
                        <div class="head-left-one">
                            <img :src="item.userHead" /> 
                        </div>
                        <div class="head-left-two">
                            {{ item.userName }}
                        </div>
                        <div class="head-left-three">Lv:{{ item.grade }}</div>
                    </div>
                    <div class="head-right">...</div>
                </div>
                <!-- 获取图片id进行图片跳转 -->
                <div class="img" @click="jump(item.id)">
                    <img :src="item.img" />
                </div>
                <!-- <router-link class="img" tag="div" :to="`/dishesofdetail/${item.id}`">
                    <img :src="item.img" />
                </router-link> -->
                <div class="collect">
                    <div class="collect-left">
                        <ul>
                            <li v-for="u in item.collect" :key="u.key">
                                <img :src="u.userHead" />
                            </li>
                        </ul>
                    </div>
                    <div class="collect-right" @click="add(item)">收藏</div>
                </div>
                <div class="text">
                    {{ item.text }}
                </div>
            </li>
        </ul>
        <div class="dianzi"></div>
    </div>
</template>

<script>
//引入vuex
import { mapState, mapMutations } from "vuex";
export default {
    data() {
        return {
            home: [
                {
                    img: require("../assets/美食资源/img/big-1.jpeg"),
                    userHead: require("../assets/美食资源/img/user-head-1.jpg"),
                    userName: "揪揪耳朵",
                    grade: "6",
                    text: "彩色雪媚娘芒果大福不会变硬的饼皮，宝宝迫不及待吃了2个看来很是喜欢吖",
                    id: "1605435",
                    collect: [
                        { userHead: require("../assets/美食资源/img/head-1.jpg"), key: "9" },
                        { userHead: require("../assets/美食资源/img/head-2.jpg"), key: "10" },
                        { userHead: require("../assets/美食资源/img/head-3.jpg"), key: "11" },
                        { userHead: require("../assets/美食资源/img/head-4.jpg"), key: "12" },
                    ],
                },
                {
                    img: require("../assets/美食资源/img/big-2.jpg"),
                    userHead: require("../assets/美食资源/img/user-head-2.jpg"),
                    userName: "麦可安",
                    grade: "6",
                    text: "紫菜肉松咸饼干",
                    id: "1724337",
                    collect: [
                        { userHead: require("../assets/美食资源/img/head-1.jpg"), key: "1" },
                        { userHead: require("../assets/美食资源/img/head-2.jpg"), key: "2" },
                        { userHead: require("../assets/美食资源/img/head-3.jpg"), key: "3" },
                        { userHead: require("../assets/美食资源/img/head-4.jpg"), key: "4" },
                    ],
                },
                {
                    img: require("../assets/美食资源/img/big-3.jpg"),
                    userHead: require("../assets/美食资源/img/user-head-3.jpg"),
                    userName: "紫煜_zy",
                    grade: "6",
                    text: "冰花生煎饺",
                    id: "1724336",
                    collect: [
                        { userHead: require("../assets/美食资源/img/head-1.jpg"), key: "5" },
                        { userHead: require("../assets/美食资源/img/head-2.jpg"), key: "6" },
                        { userHead: require("../assets/美食资源/img/head-3.jpg"), key: "7" },
                        { userHead: require("../assets/美食资源/img/head-4.jpg"), key: "8" },
                    ],
                },
                {
                    img: require("../assets/美食资源/img/big-4.jpg"),
                    userHead: require("../assets/美食资源/img/user-head-4.jpg"),
                    userName: "菜菜美食日记",
                    grade: "7",
                    text: "菜团子 | 爽脆开胃，口感更加爽脆清甜，颜色也更鲜嫩好看。",
                    id: "3050035",
                    collect: [
                        { userHead: require("../assets/美食资源/img/head-1.jpg"), key: "13" },
                        { userHead: require("../assets/美食资源/img/head-2.jpg"), key: "14" },
                        { userHead: require("../assets/美食资源/img/head-3.jpg"), key: "15" },
                        { userHead: require("../assets/美食资源/img/head-4.jpg"), key: "16" },
                    ],
                },
                {
                    img: require("../assets/美食资源/img/big-5.jpeg"),
                    userHead: require("../assets/美食资源/img/user-head-5.jpg"),
                    userName: "噜噜汩汩",
                    grade: "5",
                    text: "有平底锅就能做的糯米小松饼",
                    id: "3195021",
                    collect: [
                        { userHead: require("../assets/美食资源/img/head-1.jpg"), key: "17" },
                        { userHead: require("../assets/美食资源/img/head-2.jpg"), key: "18" },
                        { userHead: require("../assets/美食资源/img/head-3.jpg"), key: "19" },
                        { userHead: require("../assets/美食资源/img/head-4.jpg"), key: "20" },
                    ],
                },
            ],
            banners: [
                // require引入
                { img: require("../assets/美食资源/banner/banner-1.jpg") },
                { img: require("../assets/美食资源/banner/banner-2.jpg") },
                { img: require("../assets/美食资源/banner/banner-3.jpg") },
                { img: require("../assets/美食资源/banner/banner-4.jpg") },
                { img: require("../assets/美食资源/banner/banner-5.jpg") },
            ],
        };
    },
    computed: {
        //展开数据 数据解构
        ...mapState(["lis"]),
    },
    methods: {
        //解构方法
        ...mapMutations(["setlis"]),
        add(a) {
            // 开关
            var show = true;
            if (this.lis.length > 0) {
                for (var i = 0; i < this.lis.length; i++) {
                    if (a.id == this.lis[i].id) {
                        show = false;
                        this.$toast("已经收藏过了...");
                    }
                }
            }

            if (show) {
                this.setlis(a);
                // 弹出消息框
                this.$toast("收藏成功");
            }
        },

         jump(id){
             this.$router.push("/dishesofdetail/"+id);
         }
    },
};
</script>

<style scoped>

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    /* line-height: 150px; */
    text-align: center;
    width: 100vw;
    /* border: 1px solid red; */
    /* background-color: #39a9ed;
    min-height：数值 表示：给公共地方设置高度 */
}

.images {
    width: 100%;
    height: 100%;
}

.home h1 {
    /* 设置不同的 HTML 元素的尺寸： */
    font-size: 30px; 
    text-align: center;
}

.home .banners {
    width: 100%;
    height: 15vh;
}

img {
    width: 100%;
    height: 100%;
}

.home {
    width: 100%;
    color: white;
    background-color: black;
}

.home ul {
    width: 100%;
    /* 默认值。边框颜色为透明。可以借此属性画一些基本形状，典型就是三角形 
    所以是指的边框的颜色，而transparent则设为了透明。*/
    border-top: 1px solid transparent;
    /* border: 1px solid red; */
}

.home ul li {
    width: 100%;
}

.home ul li .head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
    padding: 0 8px;
    /* 加了box-sizing: border-box属性，padding和border的值就不会在影响元素的宽高，
        相当于把padding和border的值都算在content里， 
    盒子模型会自动根据padding和border的值来调整content的值，就不需要手动调整
    简称：怪异盒子模型 */
    box-sizing: border-box;
    margin-top: 20px;
}

.home ul li .head-left {
    display: flex;
    align-items: center;
}

.home ul li .head-left .head-left-one {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* 溢出隐藏 ：元素内容溢出的时候隐藏溢出的部分*/
    overflow: hidden;
    margin-right: 10px;
}

.home ul li .head-left .head-left-two {
    font-size: 15px;
    margin-right: 10px;
}

.home ul li .head-left .head-left-three {
    font-size: 13px;
    font-weight: 700;
    color: orangered;
}

.home ul li .collect {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 5px 8px;
    box-sizing: border-box;
}

.home ul li .collect .collect-left ul {
    display: flex;
    position: relative;
}

.home ul li .collect .collect-left ul li {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid white;
    background-color: black;
}

/* 设置头像的折叠 */
.home ul li .collect .collect-left ul li:nth-child(2) { 
    position: absolute;
    left: 22px;
    /* z-index 属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。
    当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。 
    值：表示优先级*/
    z-index: 3;
}

.home ul li .collect .collect-left ul li:nth-child(3) {
    position: absolute;
    left: 48px;
    z-index: 4;
}

.home ul li .collect .collect-left ul li:nth-child(4) {
    position: absolute;
    left: 75px;
    z-index: 5;
}

.home ul li .collect .collect-right {
    display: flex;
    align-items: center;
}

.home ul li .text {
    margin: 10px 0;
    padding: 0 8px;
    box-sizing: border-box;
    /* 行高 */
    line-height: 24px;
}

.home .dianzi {
    /* 将无法显示的信息和菜单栏进行垫高，将能过够看到
    相当于设置一个盒子进行盒子间的挤出 */
    height: 6vh;
    width: 100%;
}
</style>
